<template>
  <div>
    <PageTitle :title="titleName"></PageTitle>
    <div class="form-wrapper">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="加盟商名称" prop="class_name">
          <el-input v-model="ruleForm.class_name" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="提现金额" prop="class_name">
          <el-input v-model="ruleForm.class_name" :readonly="true">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="银行名称" prop="class_name">
          <el-input v-model="ruleForm.class_name" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="银行卡号" prop="class_name">
          <el-input v-model="ruleForm.class_name" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="预留手机号" prop="class_name">
          <el-input v-model="ruleForm.class_name" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" prop="state">
          <el-select v-model="ruleForm.state" placeholder="审核是否通过">
            <el-option label="通过" value="2"></el-option>
            <el-option label="不通过" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import PageTitle from '@/components/pageTitle/PageTitle.vue'
  import _ from 'lodash'
  export default {
    name: 'MerchantWithdrawDetail',
    components: {
      PageTitle
    },
    mounted() {
      // this._get()
    },
    data() {
      return {
        ruleForm: {
          class_name: '',
          state: ''
        },
        rules: {
          state: [
            { required: true, message: '请选择审核状态', trigger: 'change' }
          ]
        }
      }
    },
    computed: {
      titleName() {
        return '加盟商提现详情'
      }
    },
    methods: {
      submitForm() {
        this.$confirm('确认变更状态吗？', '提示', {
          type: 'warning'
        }).then(r => {
          this._submitForm()
        })
      },
      _submitForm: _.throttle(function() {
        this.$refs.ruleForm.validate(async (valid) => {
          if(!valid) {
            return false
          }
          
          try{
            let {data: {code, data, msg}} = await this.$axios({
              url: this.submitUrl,
              method: 'POST',
              data: {
                id: this.$route.params.id,
                class_name: this.ruleForm.class_name,
                state: this.ruleForm.state
              }
            })
            
            if(code == 0) {
               this.$message.success('操作成功！')
               setTimeout(() => {
                 this.$router.go(-1)
               }, 2000)
            } else {
              this.$message.warning(data.message)
            }
          }catch(e){
            this.$message({
              type: 'error',
              message: e
            })
          }
        })
      },2000,{
        trailing: false
      }),
      async _get() {
        try{
          let {data: {code, data, msg}} = await this.$axios({
            url: this.$api + '/v1/fication/surface' ,
            method: 'GET',
            params: {
              id: this.$route.params.id
            }
          })
          
          if(code == 0) {
            this.ruleForm.class_name = data[0].class_name
            this.ruleForm.state = data[0].state
          } else {
            this.$message.warning(data.message)
          }
        }catch(e){
          this.$message({
            type: 'error',
            message: e
          })
        }
      }
    }
  }
</script>

<style>
</style>
